import {Button, Input, message, Modal} from "antd";
import {useState} from "react";
import HttpRequestUtils from "../../utils/HttpRequestUtils";
import gengzpMqApis from "../../apis/apis";
import 'antd/dist/reset.css';


const TopicAdd = (props) => {

    // antd的message
    const [messageApi, contextHolder] = message.useMessage();
    // 新增topic请求参数实体
    const [addTopicParam, setAddTopicParam] = useState({
        topicName: '',
        topicDescription: ''
    })

    /**
     * 清空新增topic请求参数
     */
    const cleanAddTopicParam = () => {
        setAddTopicParam({
            topicName: '',
            topicDescription: ''
        })
    }

    /**
     * 关闭新增topic对话框
     */
    const closeTopicAddModal = () => {
        props.setTopicAddModalVisible(false)
        // 关闭对话框后清空输入框里的所有内容
        cleanAddTopicParam();
    }

    /**
     * 发送请求新增topic
     */
    const doAddTopic = () => {
        if (addTopicParam.topicName === '' || addTopicParam.topicName === null) {
            messageApi.error('未输入主题名称，无法新增topic');
            return;
        }

        HttpRequestUtils.post(gengzpMqApis.addTopic, {
            topic: addTopicParam.topicName,
            description: addTopicParam.topicDescription
        }).then(res => {
            if (res.code === 200) {
                // 关闭对话框后清空输入框里的所有内容
                props.pageQueryTopic();
                messageApi.success('操作成功');
                closeTopicAddModal();
            }
        }).catch(err => {
            messageApi.error('新增Topic失败。原因：' + err.message);
        })
    }

    return (
        <Modal
            title={"新增Topic"}
            open={props.topicAddModalVisible}
            onCancel={() => {
                closeTopicAddModal();
            }}
            footer={<div>
                <Button
                    danger={true}
                    onClick={() => {
                        closeTopicAddModal();
                    }}
                >
                    取消
                </Button>
                <Button
                    type={'primary'}
                    style={{marginLeft: '10px'}}
                    onClick={() => doAddTopic()}
                >
                    确认新增
                </Button>
            </div>}
        >
            <div style={{
                display: 'flex',
                justifyContent: 'center',  // 水平居中
                alignItems: 'center',      // 垂直居中
                marginTop: "20px",
                marginBottom: '20px'
            }}>
                <div>
                    {contextHolder}
                    <div style={{display: 'flex', height: '30px'}}>
                        <div style={{display: 'flex', alignItems: 'center'}}>
                            Topic名称：
                        </div>
                        <div>
                            <Input
                                style={{width: '200px'}}
                                placeholder="请输入主题名"
                                value={addTopicParam.topicName}
                                onChange={(e) => setAddTopicParam(
                                    {
                                        ...addTopicParam,
                                        topicName: e.target.value
                                    }
                                )}
                            />
                        </div>
                    </div>
                    <div style={{display: 'flex', height: '30px', marginTop: '10px'}}>
                        <div style={{display: 'flex', alignItems: 'center'}}>
                            Topic描述：
                        </div>
                        <div>
                            <Input
                                style={{width: '200px'}}
                                placeholder="请输入主题描述"
                                value={addTopicParam.topicDescription}
                                onChange={(e) => setAddTopicParam(
                                    {
                                        ...addTopicParam,
                                        topicDescription: e.target.value
                                    }
                                )}
                            />
                        </div>
                    </div>
                </div>
            </div>
        </Modal>
    )
}
export default TopicAdd;